<template>
    <s-layout title="收藏" navbar="custom1" color='#333333'>
        <assNavbar title="收藏" :background="{ BGcolor: '#fff', img: 'none' }">
        </assNavbar>
        <!-- <view class="tabsBar">
            <view class="tab" @click="changes(1)"><text :class="clicks == 1 ? 'active' : ''">话题</text></view>
            <view class="tab" @click="changes(2)"><text :class="clicks == 2 ? 'active' : ''">发现</text></view>
        </view> -->
        <view class="tabs">
            <scroll-view scroll-x enable-flex class="tabItemBar">
                <view v-for="(item, index) in state.tab" class="tabItem" @click="changeTab(index, item.id)">
                    <text
                        :style="tabCurrent == index ? 'background: white;color:#48DFBD;border:#48DFBD 2rpx solid;' : 'background: #F7F8FA;border:#F7F8FA 2rpx solid;'">{{
                            item.name }}</text>
                </view>
            </scroll-view>
        </view>
        <view class="contentBar">
            <view v-for="item in state.collectionList" class="items" :key="item" @click="sheep.$router.go('/association/pages/find', { id: item.find_id, type: item.label })">
                <view class="imgBar">
                    <image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                </view>
                <view class="typeBar">
                    <image style="width: 100%;height: 100%;"
                        :src="item.label == 'share' ? 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/icon0.png' :
                            item.label == 'questions' ? 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/icon1.png' :
                                item.label == 'note' ? 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/icon2.png' :
                                    item.label == 'visit' ? 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/icon3.png' : ''">
                    </image>
                </view>
                <view class="etcBar">
                    <!-- 我是描述 -->
                </view>
                <view class="title">
                    {{ item.title }}
                </view>
                <view class="userBar" @click.stop="jump('/pages/user/userCenter/index?isMe=false&mobile=' + item.mobile)">
                    <view class="avatar">
                        <image :src="item.avatar" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                    </view>
                    <view class="name">
                        {{ item.nickname }}
                    </view>
                </view>
                <view class="likeBar" @click.stop="setLike(item)">
                    <uni-icons type="heart-filled" size="16" color="#48DFBD" v-if="item.is_likes == 1"></uni-icons>
                    <uni-icons type="heart" size="16" color="#48DFBD" v-else></uni-icons>
                    <text style="color: #666666;font-size: 24rpx;margin-left: 10rpx;">{{ item.likes }}</text>
                </view>
            </view>
        </view>
    </s-layout>
</template>
<script setup>
import assNavbar from '@/components/ass-navbar.vue'
import sheep from '@/sheep';
import { ref, reactive } from 'vue'
import assApi from '@/association/api'
import { onLoad,onShow } from '@dcloudio/uni-app';
let clicks = ref(1)
let tabCurrent = ref(0)
const state = reactive({
    mobile: 0,
    currentTab: 0,
    pagination: {
        data: [],
        current_page: 1,
        total: 1,
        last_page: 1,
    },
    tab: [{
        name: '  全部  ',
        id: 0
    }],
    activeTab: 0,
    collectionList: []
})

onLoad(async (options) => {
    await getCategory()
})
onShow(async () => {
    let pagearr = getCurrentPages();//获取应用页面栈
    let currentPage = pagearr[pagearr.length - 1];//获取当前页面信息
    console.log('option:', currentPage.options)//获取页面传递的信息
    if (currentPage.options?.mobile) {
        state.mobile = currentPage.options.mobile
    } else {
        state.mobile = sheep.$store('user').userInfo.mobile
    }
    await getList()
})
const changeTab = (index, id) => {
    tabCurrent.value = index
    state.activeTab = id
    getList()
}
// const changes = (num) => {
//     clicks.value = num
//     changeTab(0)
// }
const getCategory = async (type) => {
    let res = await assApi.getCategory({
        type: 'find'
    })
    state.tab = state.tab.concat(res.data.lists)
}
const getList = async () => {
    let res = await assApi.info.collectionList({
        mobile: state.mobile,
        page: 1,
        list_rows: 99,
        category_id: state.activeTab
    })
    state.collectionList = res.data.data
}
const jump = (url) => {
    sheep.$router.go(url);
}
const setLike = async (item) => {
    let res = await assApi.findLike({
        find_id: item.find_id
    })
    item.is_likes = !!res.data.is_like
    if (item.is_likes) {
        item.likes += 1
    } else {
        item.likes -= 1
    }
}
</script>
<style lang="scss" scoped>
.tabsBar {
    display: flex;
    background: white;

    .tab {
        height: 96rpx;
        line-height: 96rpx;
        width: 50vw;
        text-align: center;
    }

    .active {
        font-weight: 600;
        color: #48dfbd;
        height: 90rpx;
        border-bottom: #48DFBD solid 6rpx;
        display: block;
        width: max-content;
        margin: 0 auto;
        animation: fadeIn 1s ease-in-out;
    }
}

.tabs {
    background: white;

    .tabItemBar {
        white-space: nowrap;
        display: flex;
        height: 92rpx;
        justify-content: space-around;

        .tabItem {
            text-align: center;
            line-height: 92rpx;

            text {
                padding: 12rpx 20rpx 8rpx 20rpx;
                border-radius: 28rpx;
            }
        }
    }

}

.contentBar {
    padding: 20rpx 30rpx 0 30rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .items {
        margin-bottom: 24rpx;
        width: 335rpx;
        height: 516rpx;
        background: white;
        position: relative;

        .imgBar {
            width: 335rpx;
            height: 342rpx;
            position: absolute;
            top: 0;
            left: 0;
            // background: #bfa;
        }

        .typeBar {
            text-align: center;
            color: white;
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            top: 16rpx;
            right: 16rpx;
            border-radius: 50%;
            overflow: hidden;
            // background: #ff6700;
        }

        .etcBar {
            position: absolute;
            left: 8rpx;
            bottom: 190rpx;
            height: 32rpx;
            line-height: 32rpx;
            width: max-content;
            color: white;
            background: rgba($color: #000000, $alpha: 0.3485);
            padding: 4rpx 10rpx 6rpx 10rpx;
            border-radius: 8px;
        }

        .title {
            position: absolute;
            left: 10rpx;
            top: 356rpx;
            max-width: 320rpx;
            margin: 14rpx 10rpx 30rpx 10rpx;
            font-size: 28rpx;
            font-weight: 600;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .userBar {

            .avatar {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                overflow: hidden;
                // background: #bfa;
                position: absolute;
                left: 10rpx;
                bottom: 16rpx;
            }

            .name {
                width: max-content;
                font-size: 24rpx;
                position: absolute;
                left: 58rpx;
                bottom: 20rpx;
            }
        }

        .likeBar {
            position: absolute;
            right: 12rpx;
            bottom: 20rpx;
            display: flex;
            align-items: center;
        }
    }

}

@keyframes fadeIn {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}
</style>